<template>
  <view class="container">
    <pap-navbar title="浇筑令列表" back bgColor="transparent" />
    <view class="tool-bar">
      <view class="tool-bar-item"> 我创建的 </view>
      <view class="btn-text" @click="pageJump(null, 'create')"> 新建 </view>
    </view>
    <!-- <pap-tab /> -->
    <u-tabs :list="tabList"></u-tabs>
    <scroll-view scroll-y="true" class="grow min-h-0 TimUi-list">
      <view
        class="flex-col TimUi-list-item"
        v-for="item in poureList"
        :key="item.no"
        @click.stop="pageJump(item, 'perview')"
      >
        <view class="flex TimUi-list-item-text">
          {{ item.no }}
        </view>
        <view class="flex TimUi-list-item-text">
          <view>区域：{{ item.area }} </view>
          <view>施工部位：{{ item.location }} </view>
        </view>
        <view class="flex TimUi-list-item-text">
          <view>强度等级：{{ item.strength }} </view>
          <view>设计方量：{{ item.volume }} </view>
        </view>
        <view :class="['status', ['warn', 'sucees'][item.status]]"
          >{{ ['未开始', '进行中', '已完成'][item.status] }}
        </view>
        <view class="opreation-group" v-if="item.status < 2">
          <button
            class="TimUi-btn bgc-366EF4-618DFF"
            @click="pageJump(item, 'edit')"
          >
            编辑
          </button>
          <button
            class="TimUi-btn bgc-366EF4-618DFF"
            v-if="item.status === 1"
            @click="pageJump(item, 'acceptance')"
          >
            验收
          </button>
        </view>
        <view class="flex TimUi-list-item-text">
          <view>计划生产日期：{{ item.date }} </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import papTab from './components/pap-tab/pap-tab.vue'
import dayjs from '@/utils/dayjs'
export default {
  components: {
    papTab
  },
  data() {
    return {
      tabList: [
        {
          name: '全部'
        },
        {
          name: '未开始'
        },
        {
          name: '进行中'
        },
        {
          name: '已完成'
        },
        {
          name: '已取消'
        }
      ],
      poureList: []
    }
  },
  mounted() {
    for (let i = 0; i < 10; i++) {
      const tmp = {
        no: new Date().getTime() + i,
        area: `${i + 1}标拌合站`,
        location: '墩柱',
        strength: 'C30',
        volume: '30',
        date: dayjs().format('YYYY-MM-DD'),
        status: Math.floor(Math.random() * 3)
      }
      this.poureList.push(tmp)
    }
  },
  methods: {
    pageJump(item, type) {
      let path = ''
      if (type === 'create') {
        path = `/subPages/pouring-order/edit`
      } else if (type === 'edit') {
        path = `/subPages/pouring-order/edit?no=${item.no}`
      } else if (type === 'acceptance') {
        path = `/subPages/pouring-order/addRecord`
      } else {
        path = `/subPages/pouring-order/detail`
      }
      uni.navigateTo({
        url: path
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.tool-bar {
  display: flex;
  justify-content: space-between;
  padding: 26rpx 48rpx;
  font-size: 32rpx;

  .btn-text {
    color: rgba(0, 82, 217, 1);
  }
}

.TimUi-list {
  padding-bottom: env(safe-area-inset-bottom);

  .TimUi-list-item {
    align-items: self-start;
    margin: 0 32rpx 32rpx;
    padding: 32rpx;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0rpx 12rpx 60rpx 10rpx rgba(0, 0, 0, 0.05);
    border-radius: 12rpx;

    .TimUi-list-item-text {
      width: 100%;
      justify-content: space-between;
      font-size: 28rpx;
      color: rgba(78, 89, 105, 1);

      view {
        flex: 0 0 50%;
        line-height: 44rpx;
        margin: 0 0 20rpx;
      }

      &:first-child {
        margin: 0 0 24rpx;
        font-size: 32rpx;
        color: rgba(52, 56, 63, 1);
      }

      &:last-child {
        view {
          flex: 0 0 100%;
          margin: 0;
        }
      }
    }

    .status {
      position: absolute;
      top: 0;
      right: 0;
      padding: 8rpx 20rpx;
      font-size: 24rpx;
      color: rgba(52, 56, 63, 1);
      background: rgba(201, 205, 212, 1);
      border-radius: 0rpx 12rpx 0 12rpx;

      &.sucees {
        color: rgba(0, 136, 88, 1);
        background: rgba(198, 243, 215, 1);
      }

      &.warn {
        color: rgba(227, 115, 24, 1);
        background: rgba(255, 217, 194, 1);
      }
    }

    .opreation-group {
      z-index: 2;
      position: absolute;
      bottom: 24rpx;
      right: 32rpx;
      display: flex;
      column-gap: 24rpx;
      margin: 0;
      padding: 0;

      .TimUi-btn {
        line-height: 44rpx;
        padding: 6rpx 20rpx;
        font-size: 24rpx;
        color: rgba(255, 255, 255, 1);
        // background-color: linear-gradient(270deg, #366ef4 0%, #618dff 100%);
        background: linear-gradient(270deg, #366ef4 0%, #618dff 100%);
      }
    }
  }
}
</style>
